<template>
  <div class="c-property-certificate-input-test">
    <h3>CPropertyCertificateInput 组件测试</h3>

    <!-- 基本用法 -->
    <div class="test-section">
      <h4>1. 基本用法</h4>
      <CPropertyCertificateInput 
        v-model="basicValue" 
        :format-options="formatOptions"
      />
      <p class="result">输入结果: {{ basicValue }}</p>
    </div>

    <!-- 选择不同格式 -->
    <div class="test-section">
      <h4>2. 选择不同格式</h4>
      <CPropertyCertificateInput 
        v-model="formatValue" 
        :format-options="formatOptions"
      />
      <p class="result">输入结果: {{ formatValue }}</p>
      <p class="note">提示：选择不同的产权证格式，输入模板会自动切换</p>
    </div>

    <!-- 自动跳转功能 -->
    <div class="test-section">
      <h4>3. 自动跳转功能</h4>
      <CPropertyCertificateInput 
        v-model="autoJumpValue" 
        :format-options="formatOptions"
      />
      <p class="result">输入结果: {{ autoJumpValue }}</p>
      <p class="note">提示：输入完第一部分数字后会自动跳转到第二部分输入</p>
    </div>

    <!-- 必填标记 -->
    <div class="test-section">
      <h4>4. 带必填标记</h4>
      <CPropertyCertificateInput 
        v-model="requiredValue" 
        :show-required-mark="true"
        :format-options="formatOptions"
      />
    </div>

    <!-- 禁用状态 -->
    <div class="test-section">
      <h4>5. 禁用状态</h4>
      <CPropertyCertificateInput 
        v-model="disabledValue" 
        disabled
        :format-options="formatOptions"
      />
    </div>

    <!-- 加载状态 -->
    <div class="test-section">
      <h4>6. 加载状态</h4>
      <CPropertyCertificateInput 
        v-model="loadingValue" 
        :loading="true"
        :format-options="formatOptions"
      />
    </div>

    <!-- 显示上手值 -->
    <div class="test-section">
      <h4>7. 带上手值</h4>
      <CPropertyCertificateInput 
        v-model="oldValue" 
        :show-old-value="true"
        old-value="闽（2023）厦门市不动产权第1234567号"
        :format-options="formatOptions"
      />
    </div>

    <!-- 预设值 -->
    <div class="test-section">
      <h4>8. 预设值</h4>
      <CPropertyCertificateInput 
        v-model="presetValue" 
        :format-options="formatOptions"
      />
      <p class="result">输入结果: {{ presetValue }}</p>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import CPropertyCertificateInput from '../CPropertyCertificateInput/CPropertyCertificateInput.vue'

// 定义测试用的格式选项
const formatOptions:any = [
  {
    value: 'min-custom-1',
    label: '闽([4])厦门市不动产权第[7]号',
    template: [
      { type: 'text', value: '闽（' },
      { type: 'input', length: 4 },
      { type: 'text', value: '）厦门市不动产权第' },
      { type: 'input', length: 7 },
      { type: 'text', value: '号' },
    ],
  },
  {
    value: 'min-custom-2',
    label: '闽([4])厦门市房证第[7]号',
    template: [
      { type: 'text', value: '闽（' },
      { type: 'input', length: 4 },
      { type: 'text', value: '）厦门市房证第' },
      { type: 'input', length: 7 },
      { type: 'text', value: '号' },
    ],
  },
  {
    value: 'min-custom-3',
    label: '闽国用([4])字第[10]号',
    template: [
      { type: 'text', value: '闽国用（' },
      { type: 'input', length: 4 },
      { type: 'text', value: '）字第' },
      { type: 'input', length: 10 },
      { type: 'text', value: '号' },
    ],
  },
]

// 基本输入
const basicValue = ref('')

// 不同格式输入
const formatValue = ref('')

// 自动跳转测试
const autoJumpValue = ref('')

// 必填标记测试
const requiredValue = ref('')

// 禁用状态测试
const disabledValue = ref('闽（2022）厦门市不动产权第1234567号')

// 加载状态测试
const loadingValue = ref('')

// 上手值测试
const oldValue = ref('')

// 预设值测试
const presetValue = ref('闽（2021）厦门市不动产权第7654321号')
</script>

<style lang="scss" scoped>
.c-property-certificate-input-test {
  overflow: auto;
  height: 100%;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;

  h3 {
    margin-bottom: 20px;
    color: #333;
    font-size: 20px;
    font-weight: 600;
  }

  h4 {
    margin: 15px 0 10px;
    color: #666;
    font-size: 16px;
    font-weight: 500;
  }

  .test-section {
    margin-bottom: 25px;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
  }

  .result {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
    word-break: break-all;
  }

  .note {
    margin-top: 8px;
    padding: 8px;
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 4px;
    font-size: 12px;
    color: #856404;
  }
}
</style>